<template>
  <el-container>
    <el-header class='header-main required-header'>
      <el-row >
        <el-col :span='24'>
          <div class='header-title'>
            <p>账号安全中心<span>密码找回</span></p>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main class='required-main'>
      <div id='containers' >
        <div id='output' >
          <el-row class='title-step'>
            <el-steps :active='activeId' align-center>
              <el-step title='输入手机号' description=''></el-step>
              <el-step title='获取验证码' description=''></el-step>
              <el-step title='重置密码' description=''></el-step>
              <el-step title='完成' description=''></el-step>
            </el-steps>
          </el-row>

          <div v-if='activeId==1'>
            <div class='required-module'>
                <el-row>
                  <el-col  class='search-box'>
                    <label class='el-form-item__label'> 手机号码:</label>
                    <div class='search-input-box'>
                      <el-input  placeholder='请输入登录名绑定的手机号码' v-model='mobile'></el-input>
                      <div class='grid-content bg-purple-dark'>{{error_meg}}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <div id='your-dom-id' class='nc-container input-marr' ></div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <div class=' input-marr' ><el-button type='primary' @click='sendMsg()' style='width: 100%'>下一步</el-button></div>
                  </el-col>
                </el-row>
            </div>
          </div>

          <div v-if='activeId==2'>
            <el-button type='primary' circle @click='goto1Step()' icon='el-icon-arrow-left' class='top-re-btn' plain></el-button>
            <div class='required-module'>
              <el-row>
                <el-col  class='search-box'>
                  <label class='el-form-item__label'> 手机号:</label>
                  <div class='search-input-box'>
                    <span>{{validationCodeData.mobile}}</span>
                  </div>
                </el-col>
                <el-col class='search-box'>
                  <label class='el-form-item__label'> 账户名:</label>
                  <div class='search-input-box'>
                    <span>{{validationCodeData.userId}}</span>
                  </div>
                </el-col>
                <el-col  class='search-box'>
                  <label class='el-form-item__label'> 用户名: </label>
                  <div class='search-input-box'>
                    <span>{{validationCodeData.userName}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col  class='search-box'>
                  <label class='el-form-item__label'> 验证码: </label>
                  <p class='input-box'>
                    <el-input  placeholder='请输入短信验证码' v-model='msgCode'>
                      <template slot='append' v-if='isCountDown'>{{msgSecond}}</template>
                      <el-button slot='append' v-else icon='el-icon-refresh' @click.native='sendMsgAgain'>重新获取</el-button>
                    </el-input>
                  </p>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <div class='input-marr' ><el-button type='primary' @click='goto3step()' style='width: 100%'>下一步</el-button></div>
                </el-col>
              </el-row>
            </div>

          </div>

          <div v-if='activeId==3'>
            <el-button type='primary' circle @click='goto2step()' icon='el-icon-arrow-left' class='top-re-btn' plain></el-button>
            <div class='required-module'>
              <el-row>
                <el-form label-width='120px' :rules='rules' ref='passwordForm'  :model='passwordForm'>
                  <el-form-item label='' style='display: none' >
                    <el-input  v-model='passwordForm.mobile' ></el-input>
                  </el-form-item>
                  <el-form-item label='新密码' prop='password'>
                    <el-input placeholder='请输入新密码' type='password' v-model='passwordForm.password'  ></el-input>
                  </el-form-item>
                  <el-form-item label='重复密码'  prop='confirmPassword'>
                    <el-input placeholder='请重新输入密码' type='password' v-model='passwordForm.confirmPassword' ></el-input>
                  </el-form-item>
                </el-form>
              </el-row>
              <el-row>
                <el-col>
                  <div class='input-marr' ><el-button type='primary' @click='goto4step()' style='width: 100%'>下一步</el-button></div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div v-if='activeId==4'>
            <div class='required-module'>
              <el-row>
                <el-col>
                  <div class='re-success m-b20'><span class='code-img iconfont icon-free-data'></span>密码重置成功!</div>
                  <div class='text-center '><router-link to='/' class='login'>重新登录</router-link></div>
                </el-col>
              </el-row>
            </div>
          </div>

        </div>
      </div>
    </el-main>
  </el-container>

</template>
<script>
import Vue from 'vue';
import { aliyunVerification } from '@/api/login';
import {
  retrieveSendMsg,
  retrieveCode,
  updatePasswordByMobile
} from '@/api/retrieve';
import vail_ from '@/store/validation';
export default {
  data () {
    return {
      loginProperties: {},
      activeId: 1,
      mobile: '',
      error_meg: '',
      msgSecond: 120,
      firstMsgSecond: 120,
      countDownInt: '',
      msgCode: '',
      passwordForm: {},
      isCountDown: true,
      validationCodeData: {},
      rules: {
        password: [
          {
            required: true,
            validator: vail_.validatePass,
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            validator: vail_.validatePassagin,
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    sendMsg () {
      var _this = this;
      if (!_this.mobile || !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(_this.mobile)) {
        _this.error_meg = '请输入正确的手机号';
        return;
      }
      if (!_this.loginProperties || _this.loginProperties.value != 'pass') {
        _this.error_meg = '请向右滑动滑块进行验证';
        return;
      }
      _this.error_meg = '';
      var ali = {
        sessionId: _this.loginProperties.csessionid,
        sig: _this.loginProperties.sig,
        token: _this.loginProperties.token,
        scene: _this.scene,
        retrieve: true,
        mobile: _this.mobile
      };
      aliyunVerification(ali).then(response => {
        if (response.code == 0 && response.data) {
          retrieveSendMsg(_this.mobile, _this.loginProperties.csessionid).then(
            resp => {
              if (resp.code == 0) {
                _this.$message({
                  message: resp.message,
                  type: 'success'
                });
                _this.validationCodeData = resp.data;
                window.clearInterval(this.countDownInt);
                _this.nextStep(2);
                _this.msgSecond = this.firstMsgSecond;
                _this.countDown();
              } else {
                _this.$message({
                  message: resp.message,
                  type: 'error'
                });
                _this.login_nc();
              }
            }
          );
        } else {
          _this.error_meg = response.message;
          _this.login_nc();
        }
      });
    },
    countDown () {
      this.countDownInt = window.setInterval(() => {
        var se = this.msgSecond;
        if (se <= 0) {
          this.msgSecond = this.firstMsgSecond;
          this.isCountDown = false;
          window.clearInterval(this.countDownInt);
        } else {
          this.msgSecond = se - 1;
        }
      }, 1000);
    },
    sendMsgAgain () {
      var _this = this;
      window.clearInterval(this.countDownInt);
      retrieveSendMsg(_this.mobile, _this.loginProperties.csessionid).then(
        resp => {
          if (resp.code == 0) {
            _this.$message({
              message: resp.message,
              type: 'success'
            });
            _this.validationCodeData = resp.data;
            _this.isCountDown = true;
            this.msgSecond = this.firstMsgSecond;
            _this.countDown();
          } else {
            _this.$message({
              message: resp.message,
              type: 'error'
            });
          }
        }
      );
    },
    goto1Step () {
      this.loginProperties = {};
      this.error_meg = '';
      window.clearInterval(this.countDownInt);
      this.msgCode = '';
      this.preStep(1);
    },
    nextStep (n) {
      this.activeId = n;
    },
    preStep (n) {
      var _this = this;
      _this.activeId = n;
      if (n == 1) {
        Vue.nextTick(function () {
          _this.login_nc();
        });
      }
    },
    goto3step () {
      var _this = this;
      if (!_this.msgCode) {
        _this.$message({
          message: '请输入验证码!',
          type: 'error'
        });
        return;
      }
      retrieveCode(_this.mobile, _this.msgCode).then(response => {
        if (response.code == 0 && response.data) {
          _this.passwordForm.mobile = _this.mobile;
          _this.nextStep(3);
        } else {
          _this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    goto2step () {
      this.msgCode = '';
      this.isCountDown = false;
      window.clearInterval(this.countDownInt);
      this.validationCodeData.userId = '';
      this.validationCodeData.userName = '';
      this.nextStep(2);
    },
    goto4step () {
      var _this = this;
      _this.$refs.passwordForm.validate(valid => {
        if (valid) {
          updatePasswordByMobile(
            _this.mobile,
            _this.passwordForm.password,
            _this.passwordForm.confirmPassword
          ).then(response => {
            if (response.code == 0 && response.data) {
              _this.nextStep(4);
              setTimeout(() => {
                _this.$router.push({
                  path: '/'
                });
              }, 5000);
            } else {
              _this.$message({
                message: response.message,
                type: 'error'
              });
            }
          });
        } else {
          _this.$message({
            message: '密码格式有误，请重新填写',
            type: 'error'
          });
        }
      });
    },
    login_nc () {
      var _this = this;
      var nc_token = ['CF_APP_1', new Date().getTime(), Math.random()].join(
        ':'
      );
      var NC_Opt = {
        renderTo: '#your-dom-id',
        appkey: 'FFFF0N000000000063FA',
        scene: 'nc_login',
        token: nc_token,
        customWidth: 330,
        trans: { key1: 'code0' },
        elementID: ['usernameID'],
        is_Opt: 0,
        language: 'cn',
        isEnabled: true,
        timeout: 3000,
        times: 5,
        apimap: {},
        callback: function(data) {
          _this.loginProperties = data;
        }
      };
      var nc = new noCaptcha(NC_Opt);
      nc.upLang('cn', {
        _startTEXT: '请按住滑块，拖动到最右边',
        _yesTEXT: '验证通过',
        _error300:
          '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
        _errorNetwork:
          '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>'
      });
    }
  },
  mounted: function () {
    let self = this;
    self.login_nc();
  },
  created: function () {}
};
</script>

<style>
.required-header {
  background: #3a85ff;
}
.required-header .header-title p {
  font-size: 20px;
  color: #fff;
}
.required-header .header-title p span {
  height: 30px;
  display: inline-block;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 25px;
  line-height: 30px;
  left: 140px;
}
.required-main {
  box-sizing: border-box;
  padding: 100px 80px 100px;
  margin: 120px 15%;
  background: #fff;
  min-width: 750px;
  position: relative;
}
.required-main .top-re-btn {
  position: absolute;
  left: -60px;
  top: -200px;
}
.required-main .title-step {
  margin-bottom: 60px;
}
.required-main .required-module {
  width: 500px;
  margin: 0 auto;
  padding-right: 50px;
  box-sizing: border-box;
}
.required-main .required-module .re-success {
  color: #666;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
}
.required-main .required-module .re-success span {
  color: #a9d96b;
  font-size: 40px;
  vertical-align: middle;
  padding-right: 15px;
}
.required-main .required-module .login {
  color: #409eff;
}
.required-main .required-module .el-row {
  margin-bottom: 20px;
}
.required-module .search-box .el-form-item__label {
  width: 120px;
}
.required-module .search-box .search-input-box,
.required-module .search-box .input-box {
  margin-left: 120px;
}
.required-module .search-box .search-input-box .grid-content,
.required-module .search-box .input-box .grid-content {
  color: red;
}
.required-module .search-box .search-input-box span {
  line-height: 40px;
  color: #333;
}
.required-module .input-marr {
  margin-left: 120px;
}
.required-main .el-step__icon.is-text {
  border-radius: 50%;
  border: 5px solid;
}
.required-main .el-step__icon-inner {
  display: inline-block;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-align: center;
  color: inherit;
  background: #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  color: #fff;
}
.required-main .el-step__head.is-process {
  color: #e6a23c;
  border-color: #e6a23c;
}
.required-main .el-step__title.is-process {
  font-weight: 700;
  color: #e6a23c;
}
</style>156806767
